<template>
    <a-modal v-model:open="open" title="路径规划操作界面" width="50%" @ok="handleOk" @cancel="handleCancel">
        <div style="margin: 10px;"><a-table style="font-size: 12px;" :columns="columns" :data-source="data" /></div>
        <!-- <div><a-empty /></div> -->
        <a-button type="primary" @click="AddPoint">添加标记点</a-button>
        <a-button style="margin-left: 20px;" type="primary" danger @click="ClearPoint">清空标记点</a-button>
    </a-modal>

</template>
<script setup>
import { ref, watch } from 'vue';
import { DriversInfoStore } from '@/stores/driver';
import { spotsInfoStore } from '@/stores/spots';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const driversStore = DriversInfoStore()
const spotsStore = spotsInfoStore()
const open = ref(false);

const columns = ref([
    {
        title: 'id',
        dataIndex: 'key',
        width: 50
    },
    {
        title: '地点名称',
        dataIndex: 'name',
        width: 150
    },
    {
        title: '地址',
        dataIndex: 'address',
    },
    {
        title: '经纬度',
        dataIndex: 'location',
    },
]);
const data = ref([]);

const handleCancel = () => {
    data.value = []
    driversStore.SetCarOpen(false)
};
const handleOk = e => {
    if (data.value.length < 2) {
        message.error('标记点数小于2,请重新操作!')
        driversStore.SetCarOpen(false)
        driversStore.SetFuncCarDriver(false)
        return
    }
    driversStore.SetCarOpen(false)
    driversStore.SetFuncCarDriver(false)
    spotsStore.SetFuncFoodOn(false)
    spotsStore.SetFuncHouseOn(false)
    localStorage.setItem('Driver', JSON.stringify(data.value))
    localStorage.setItem('Type', driversStore.selectType)
    router.push('/map')
};
const AddPoint = () => {
    driversStore.SetCarOpen(false)
    // driversStore.SetDriverViewOpen(true)
}
const ClearPoint = () => {
    data.value = []
}
watch(() => driversStore.CarOpen, (newVal) => {
    open.value = newVal;
});
watch(() => driversStore.selectPoint, (newVal) => {
    if (driversStore.selectType == 'Car') {
        if (data.value.length < 18) {
            data.value.push({
                key: data.value.length + 1,
                location: (typeof newVal.location) == 'string' ? newVal.location : newVal.location.join(','),
                address: newVal.address,
                name: newVal.spotname ? newVal.spotname : newVal.name
            })
        } else {
            message.error('驾车规划仅限18个标记点!')
        }
    } else if (driversStore.selectType == 'Public') {
        if (data.value.length < 2) {
            data.value.push({
                key: data.value.length + 1,
                location: (typeof newVal.location) == 'string' ? newVal.location : newVal.location.join(','),
                address: newVal.address,
                name: newVal.spotname ? newVal.spotname : newVal.name
            })
        } else {
            message.error('公共交通仅限2个标记点!')
        }
    } else if (driversStore.selectType == 'Walk') {
        if (data.value.length < 2) {
            data.value.push({
                key: data.value.length + 1,
                location: (typeof newVal.location) == 'string' ? newVal.location : newVal.location.join(','),
                address: newVal.address,
                name: newVal.spotname ? newVal.spotname : newVal.name
            })
        } else {
            message.error('步行路线仅限2个标记点!')
        }
    }
    console.log(data.value, 'car');
});
</script>
<style lang="scss" scoped></style>